<template>
	<view class="bg-white flex flex-direction justify-between" style="height: 100vh; width: 100vw;">
		<view class="flex flex-direction">
			<view style="padding: 32rpx;">
				<text class="cuIcon-close text-black" @tap="BackPage" style="font-size: 50rpx; font-weight: bold;"></text>
			</view>
				
			<view style="padding: 32rpx; font-size: 50rpx; font-weight: bold; color: #000000;">
				输入新密码
			</view>
			
			<view style="margin-top: 106rpx; padding: 0 32rpx; ">
				<view class="flex align-center solid-bottom" style="height: 104rpx;">
					<input v-model="oldPassword" placeholder="输入旧密码" :password="true" focus style="margin-left: 22rpx; font-size: 40rpx;" />
				</view>
			</view>
			
			<view style="margin-top: 50rpx; padding: 0 32rpx; ">
				<view class="flex align-center solid-bottom" style="height: 104rpx;">
					<input v-model="newPassword" placeholder="输入新密码" :password="true" @blur="checkDifferent" style="margin-left: 22rpx; font-size: 40rpx;" />
				</view>
			</view>
			
			<view style="margin-top: 50rpx; padding: 0 32rpx; ">
				<view class="flex align-center solid-bottom" style="height: 104rpx;">
					<input v-model="newPassword2" placeholder="再次输入新密码" :password="true" @blur="checkSame()" style="margin-left: 22rpx; font-size: 40rpx;" />
				</view>
			</view>
			<view v-if="isError" style="margin-top: 32rpx; padding: 0 32rpx; height: 40rpx; font-size: 28rpx; color: #ff0000; line-height: 40rpx;">
				{{errorMsg}}
			</view>
		</view>
		
		<view class="margin-bottom-xl">
			<button type="default" style="width: 656rpx;height: 96rpx;background: #007AFF; color: #FFFFFF;"
			:style="{opacity: (isDisabled? 0.5 : 1)}" 
			:disabled="isDisabled" @click="updatePassword">
				确定
			</button>		
		</view>
	</view>
</template>

<script>
	import { mapActions } from "vuex";
	import mineApi from '../../api/mineApi.js';
	export default {
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				newPassword2: '',
				focus1: true,
				focus2: false,
				focus3: false,
				errorMsg: '',
			}
		},
		methods: {
			...mapActions(["logoutFrontEnd"]),	
			updatePassword() {
				// todo
				mineApi.changePassword({
					mobile: this.$store.getters.mobile,
					oldpassword: this.oldPassword,
					password: this.newPassword,
					confirmpassword: this.newPassword2
				}).then((res) => {
					const data = res.data;
					if(data.success) {
						this.$tip.success('修改成功!')
						return this.logoutFrontEnd();
					} else {
						this.$tip.error('旧密码错误！');
						throw new Error();
					}
				}).then((res) => {
					if(res.data.success){
						this.$Router.replaceAll({name:'loginFrontEnd'})
					}else{
						this.$tip.alert(res.data.message);
					}
				}).catch((err) => {
					console.log(err)
				})
				
			},
			check() {
				return this.checkSame();
			},
			checkDifferent() {
				if(this.newPassword.trim()=="" || this.oldPassword.trim()=="") return false;
				if(this.oldPassword == this.newPassword) {
					this.errorMsg = '新密码和旧密码一样！';
					return true;
				}else{
					return false;
				}
			},
			checkSame() {
				if(this.checkDifferent()) return true;
				if(this.newPassword =="" || this.newPassword2 =="") return false;
				if(this.newPassword != this.newPassword2) {
					this.errorMsg = '两次输入的密码不一致！';
					return true;
				}
				else {
					return false;
				}
			},
			
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		computed: {
			isError() {
				return this.check();
			},
			isDisabled() {
				return this.oldPassword=="" || this.newPassword=="" || this.newPassword2=="" || this.check()
			},
		}
	}
</script>

<style>
</style>
